<template>
  <HModal @mousedown.native.stop @cancel="close" @ok="handleOK"
          :height="800" :width="1000" :visible="visible">
    <template #title>
      <a-tabs v-model="active">
        <a-tab-pane tab="动态组合(普通)" key="simple"/>
        <a-tab-pane tab="动态组合(高级)" key="super"/>
      </a-tabs>
    </template>
    <div @mousedown.stop style="height: 100%; width: 100%;">
      <FormulaConfig
        :variableContainerConfig="variableContainerConfig" v-if="active === 'simple'"
        v-model="simpleFormula" :form-definition="formDefinition"/>
      <GroupFieldValueFormulaConfig
        :variableContainerConfig="variableContainerConfig"
        v-if="active === 'super'"
        v-model="groupFormulas" :form-definition="formDefinition"/>
    </div>
  </HModal>
</template>
<script>
import HModal from '@comp/hhd/HModal/HModal.vue';
import FormulaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaConfig.vue';
import {createProps, guid} from '@/utils';
import {createField, createFormDefinition, createFormulaGroup} from '@comp/hhd/design/FormDesigner/types';
import GroupFieldValueFormulaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/GroupFieldValueFormulaConfig.vue';
import {postAction} from '@api/manage';

export default {
  name: 'FieldValueConfig',
  components: {
    GroupFieldValueFormulaConfig,
    FormulaConfig,
    HModal
  },
  props: {
    fieldConfig: createProps(Object, createField),
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      active: 'simple',
      visible: false,
      simpleFormula: undefined,
      simpleFormulaTitle: undefined,
      groupFormulas: [],
    };
  },
  methods: {
    setData(formulas) {
      this.resetFormulas();
      this.setFormulas(formulas);
      this.open();
    },
    setFormulas(formulas) {
      if (!formulas || !formulas.length) {
        this.active = 'simple';
        return;
      }
      if (formulas[0] && formulas[0].ifFormula === 'true') {
        this.simpleFormula = formulas[0].thenFormula;
        this.active = 'simple';
      } else {
        this.active = 'super';
        this.groupFormulas = formulas;
      }
    },
    open() {
      this.visible = true;
    },
    handleOK() {
      if (this.active === 'simple' && this.simpleFormula) {
        this.loading = true;
        postAction('/flow/formula/translate', {formula: this.simpleFormula}).then(data => {
          if (data.success) {
            this.simpleFormulaTitle = data.result.formulaText;
            this.doHandlerOK();
          } else {
            this.$notification.error({message: data.message || data.result.message, duration: 3});
          }
          this.loading = false;
        }).catch(error => {
          console.log(error);
          this.loading = false;
          this.$notification.error({message: error && error.response && error.response.data.message || error.response.statusText, duration: 3});

        });
      } else {
        this.doHandlerOK();
      }
    },
    doHandlerOK() {
      this.formDefinition.fieldValueFormulaGroups = this.formDefinition.fieldValueFormulaGroups || [];
      this.formDefinition.fieldValueFormulaGroups = this.formDefinition.fieldValueFormulaGroups.filter(f => f.fieldId !== this.fieldConfig.id);
      let formulas = this.getFormulas();
      this.formDefinition.fieldValueFormulaGroups.push(...formulas);
      this.close();
    },
    getFormulas() {
      if (this.active === 'simple') {
        if (!this.simpleFormula) return [];
        let item = createFormulaGroup();
        item.thenFormula = this.simpleFormula;
        item.thenFormulaTitle = this.simpleFormulaTitle;
        item.ifFormula = "true";
        item.fieldId = this.fieldConfig.id;
        item.groupKey = guid();
        return [item];
      } else {
        let groupKey = guid();
        let groupFormulas = JSON.parse(JSON.stringify(this.groupFormulas));
        groupFormulas.forEach(item => {
          item.groupKey = groupKey;
          item.fieldId = this.fieldConfig.id;
          item.forAction = 'value';
        });
        return groupFormulas;
      }
    },
    close() {
      this.visible = false;
    },
    resetFormulas() {
      this.simpleFormula = undefined;
      this.groupFormulas = [];
    },
  },
  computed: {
    variableContainerConfig() {
      let formIds = [(this.formDefinition.subForms || []).map(i => i.id), this.formDefinition.id].toString();
      return {
        containers: ['formVariable'],
        formDefinition: this.formDefinition,
        formIds
      };
    },
  }
};
</script>